<template>
	<view>
		<view class="nav-box" :style="{'height':height+'px','background':bgColor}">
			<view class="status_bar" :style="{'height':statusBarHeight+'px'}"></view>
			<view class="nav-main flex items-center" :style="{height: navBarHeight+'px'}">
				<uni-icons type="back" size="20" class="ml-20" @click="$goRoute.goBack()" color="#ffffff"></uni-icons>
				<view class="search-input ml-20">
					<uni-icons type="search" size="16"></uni-icons>
					<input type="text" v-model="searchWords" placeholder="输入搜索内容" class="ml-20"
						style="font-size: 24rpx;" />
					<view class="font-24 mr-20">搜索</view>
				</view>
			</view>
		</view>
		<view class="pt-20 pl-20 pr-20" v-for="(item, index) in lists"
			@click="$goRoute.goUrl('/pages/company/details?id='+item.id)">
			<view class="bg-white flex space-between items-center bg-white p-30 border-radius">
				<view class="flex items-center">
					<image v-if="item.logo" :src="item.logo" mode=""
						style="width: 70rpx;height: 70rpx;border-radius: 50%;">
					</image>
					<image v-if="!item.logo" src="@/static/images/company.png" mode=""
						style="width: 70rpx;height: 70rpx;border-radius: 50%;">
					</image>
					<view class=" ml-20">
						<view class="font-24">{{item.name}}</view>
						<view class="font-22 font-grey mt-10">{{item.scale}}人 | {{item.city}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		list
	} from '../../api/company.js'
	export default {
		data() {
			return {
				height: 0,
				statusBarHeight: 0,
				navBarHeight: 0,
				searchWords: '',
				lists: [],
				pageNo: 1,
				pageSize: 10,
				profession_category: [],
				companyProfession: {}
			};
		},
		onLoad(options) {
			this.getHeight()
			this.getList()
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '河口人才招聘小程序',
				path: '/pages/company/company'
			}
		},
		onReachBottom() {
			this.getObbList()
		},
		methods: {
			getCate2() {
				getCategory({
					pcode: 'profession_category'
				}).then(res => {
					const profession_category = res.result
					for (let x in profession_category) {
						this.profession_category.push({
							value: profession_category[x].title,
							text: profession_category[x].title,
						})
					}
				})
			},
			getList() {
				uni.showLoading({
					title: '加载中'
				})
				list({
					pageSize: this.pageSize,
					pageNo: this.pageNo,
					name: this.searchWords,
				}).then(res => {
					if (this.pageNo === 1) {
						this.lists = res.result.records
					} else {
						this.lists.push(...res.result.records)
					}
					this.pageNo += 1
					uni.hideLoading()
				})
			},
			//获取屏幕导航栏高度
			getHeight() {
				if (wx.canIUse('getMenuButtonBoundingClientRect')) {
					let sysInfo = wx.getSystemInfoSync(); //状态栏的高度
					this.statusBarHeight = sysInfo.statusBarHeight;
					// 胶囊位置信息
					let rect = wx.getMenuButtonBoundingClientRect();
					this.menuButtonRect = JSON.parse(JSON.stringify(rect));
					// 导航栏高度
					let navBarHeight = (rect.top - sysInfo.statusBarHeight) * 2 + rect.height;
					this.navBarHeight = navBarHeight;
					// 自定义导航栏的高度
					this.height = sysInfo.statusBarHeight + navBarHeight;
				} else {
					wx.showToast({
						title: '您的微信版本过低，界面可能会显示不正常',
						icon: 'none',
						duration: 4000
					});
				}
			},
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
		padding-bottom: 40rpx;
	}

	.nav-box {
		background-color: #46b4b1;
		position: sticky;
		top: 0;
		z-index: 9999;

		.search-input {
			background-color: rgba(255, 255, 255, .8);
			height: 30px;
			display: flex;
			align-items: center;
			border-radius: 50rpx;
			padding: 0 30rpx;
		}
	}
</style>